import React, {Component} from 'react';
import Taro from '@tarojs/taro';
import {Image, Text, View, Block, ScrollView} from '@tarojs/components'
import {AtProgress} from "taro-ui";
import {http} from "../../utils/http";
import {GETGRADELEVEL, RESOURCE_URL} from "../../constants/api";
import {GradeLevel} from "../../utils/server.interface";
import {GetRequest, vcmonitor} from "../../utils/tools";
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import './rank.scss'

type PageState = {
  gradelevel: any
  namelist: string
  upgrade: boolean
}
export default class Rule extends Component {
  state: PageState = {
    gradelevel: false,
    namelist: '',
    upgrade: true
  }

  async componentDidShow() {
    vcmonitor(this)
    const upgrade = Taro.getCurrentInstance().router.params.upgrade || false
    const gradelevel: any = await http.get(GETGRADELEVEL)
    this.setState({upgrade, gradelevel}, () => {
      this.getThisLevel(gradelevel)
      this.getName(gradelevel)
    })
  }

  async getThisLevel(gradelevel) {
    if (gradelevel.sellerGroupId > 0) {
      gradelevel.gradeLevelInfo.map((item, index) => {
        if (gradelevel.sellerGroupId == item.id) {
          gradelevel['thisindex'] = index
          gradelevel['percentage'] = gradelevel.gradeLevelInfo[index + 1] ? ((gradelevel.sonSellerNum / (gradelevel.gradeLevelInfo[index + 1].rule_num - item.rule_num)) * 100) : ((gradelevel.sonSellerNum / (item.rule_num)) * 100)
          this.setState({gradelevel})
        }
      })
    } else {
      gradelevel.gradeLevelInfo.unshift({id: 0, name: process.env.P_ENV === 'kd' ? '普通分销' : '小白', rule_num: 0})
      gradelevel['thisindex'] = 0
      gradelevel['percentage'] = gradelevel.gradeLevelInfo[1] ? ((gradelevel.sonSellerNum / (gradelevel.gradeLevelInfo[1].rule_num)) * 100) : 0
      this.setState({gradelevel})
    }
  }

  async getName(gradelevel) {
    const nameAry: any = []
    gradelevel.gradeLevelInfo.map((item) => {
      nameAry.push(item.name)
    })
    this.setState({namelist: nameAry.join('、')})
  }

  async getPoster() {
    Taro.navigateTo({
      url: '/main/my/distributor/index'
    })
  }

  render() {
    const {gradelevel, namelist, upgrade} = this.state
    return (
      <View className='rank-page-root'>
        <GzhAuth />
        {gradelevel && gradelevel.gradeLevelInfo && <Block>
          <View className='rank-top'>
            <View
              className='rank-name'
            >{gradelevel.gradeLevelInfo[gradelevel.thisindex] ? gradelevel.gradeLevelInfo[gradelevel.thisindex].name : ''}{gradelevel.gradeLevelInfo.map((item, index) =>
              <Block key={index}>{index <= gradelevel.thisindex && <Image className='icon-img'
                src={RESOURCE_URL + "/resources/weapp/images/zan.png"}
              />}</Block>
            )}</View>
            <View className='rank-desc'>已发展直属{process.env.fxName}{gradelevel.sonSellerNum}人</View>
            <View className='rankbox'>
              <View className='rank-left'>
                <View
                  className='rank-name'
                >{gradelevel.gradeLevelInfo[gradelevel.thisindex] ? gradelevel.gradeLevelInfo[gradelevel.thisindex].name : ''}</View>
                <View className='rank-Progress'>
                  {!!gradelevel.gradeLevelInfo[gradelevel.thisindex + 1] && <View
                    className='rank-Percent'
                  >{gradelevel.sonSellerNum + '/' + (gradelevel.gradeLevelInfo[gradelevel.thisindex + 1] ? gradelevel.gradeLevelInfo[gradelevel.thisindex + 1].rule_num : gradelevel.gradeLevelInfo[gradelevel.thisindex].rule_num)}</View>}
                  <AtProgress percent={gradelevel.percentage} color='#ffda86' strokeWidth={4} isHidePercent />
                </View>
                {!!gradelevel.gradeLevelInfo[gradelevel.thisindex + 1] && <View
                  className='rank-name'
                >{gradelevel.gradeLevelInfo[gradelevel.thisindex + 1] ? gradelevel.gradeLevelInfo[gradelevel.thisindex + 1].name : gradelevel.gradeLevelInfo[gradelevel.thisindex].name}</View>}
              </View>
              {upgrade && <View className='rank-right' onClick={this.getPoster.bind(this)}>立即升级</View>}
            </View>
          </View>
          <View className='rank-center'>
            <View className='rank-center-title'>等级划分</View>
            <View className='rank-ul'>
              <View className='rank-li'>
                <View className='rank-li-span'>{process.env.fxName}成长体系包括:{namelist}</View>
              </View>
              <View className='rank-li'>
                <View className='rank-li-span'> 等级由发展直属{process.env.fxName}数量决定，数量越多，等级越高，佣
                  金越高。</View>
              </View>
            </View>
          </View>
          {gradelevel.gradeLevelInfo.length < 4 ?
            <View className='rank-swp'>
              {gradelevel.gradeLevelInfo.map((item, index) => <View key={index} className='swp-item'>
                <View className='swp-box'>
                  <Image mode='aspectFill' className='img' src={RESOURCE_URL + "/resources/weapp/images/rankIco2.png"} />
                  <View className='swp-item-name'>{item.name}</View>
                  <View className='swp-item-desc'>直属{process.env.fxName}</View>
                  <View className='swp-item-num'>{item.rule_num}<Text>人</Text></View>
                </View>
              </View>)}
            </View>
            :
            <ScrollView enableFlex scrollX>
              <View className='swiper-box'>
                {gradelevel.gradeLevelInfo.map((item, index) =>
                  <View className='swp-box' key={index}>
                    <Image mode='aspectFill' className='img'
                      src={index >= 3 ? RESOURCE_URL + "/resources/weapp/images/rankIco1.png" : RESOURCE_URL + "/resources/weapp/images/rankIco2.png"}
                    />
                    <View className='swp-item-name'>{item.name}</View>
                    <View className='swp-item-desc'>直属{process.env.fxName}</View>
                    <View className='swp-item-num'>{item.rule_num}<Text>人</Text></View>
                  </View>
                )}
                <View style='min-width: 0.1px;' />
              </View>
            </ScrollView>
          }
          {upgrade && <View className='rank-btn' onClick={this.getPoster.bind(this)}>我要升级</View>}
        </Block>}
      </View>
    )
  }
}
